<template>
  <div class="Layout">
    <div id="example">
      <div class="Divide-2">
        <div>#1-ease</div>
        <div id="div-1" class="div"></div>
        <div>#2-ease-in</div>
        <div id="div-2" class="div"></div>
        <div>#3-ease-out</div>
        <div id="div-3" class="div"></div>
        <div>#4-ease-in-out</div>
        <div id="div-4" class="div"></div>
        <div>#5-linear</div>
        <div id="div-5" class="div"></div>
      </div>
      <div class="Divide-2">
        <div>#6-step-start</div>
        <div id="div-6" class="div"></div>
        <div>#7-step-end</div>
        <div id="div-7" class="div"></div>
        <div>#8-cubic-bezier</div>
        <div id="div-8" class="div"></div>
        <div>#9-steps</div>
        <div id="div-9" class="div"></div>
      </div>
    </div>
  </div>
</template>

<style>
  .div {
    width: 100px;
    height: 100px;
    margin-bottom: 2rem;
    background-color: skyblue;
    animation: move 3s alternate forwards;
    animation-iteration-count: infinite;
  }

  @keyframes move {
    from {
      transform: translateX(0);
      background-color: skyblue;
    }

    to {
      transform: translateX(400px);
      background-color: pink;
    }
  }

  @keyframes move-6 {
    from {
      transform: translateX(0);
      background-color: skyblue;
    }

    20% {
      transform: translateX(80px);
    }

    40% {
      transform: translateX(160px);
    }

    60% {
      transform: translateX(240px);
    }

    80% {
      transform: translateX(320px);
    }

    to {
      transform: translateX(400px);
      background-color: pink;
    }
  }

  #div-1 {
    animation-timing-function: ease;
  }

  #div-2 {
    animation-timing-function: ease-in;
  }

  #div-3 {
    animation-timing-function: ease-out;
  }

  #div-4 {
    animation-timing-function: ease-in-out;
  }

  #div-5 {
    animation-timing-function: linear;
  }

  #div-6 {
    animation-timing-function: step-start;
  }

  #div-7 {
    animation-timing-function: step-end;
  }

  #div-8 {
    animation-timing-function: cubic-bezier(1.00, 0.00, 0.00, 1.00);
  }

  #div-9 {
    animation-timing-function: steps(10, end);
  }
</style>

<script>
  let param = {
    infinite: true,
    multiStep: false
  }
  let gui = new GUI()
  gui.add(param, 'infinite').onChange(ev => {
    let style = document.styleSheets[0].cssRules[0].style

    if (ev) {
      style.animationIterationCount = 'infinite'
    } else {
      style.animationIterationCount = 1
    }
  })
  gui.add(param, 'multiStep').onChange(ev => {
    let style = document.styleSheets[0].cssRules[0].style

    if (ev) {
      style.animationName = 'move-6'
    } else {
      style.animationName = 'move'
    }
  })
  Broadcast.once('render', () => {
    gui.destroy()
  })
</script>